---
layout: example
categories: example/v1.0.0
version: v1.0.0
title: Navigate to places on a map
description: Create a simple menu of places a user can select to move to on a map.
tags:
  - ui
---
<style>
.menu-ui {
  background:#fff;
  position:absolute;
  top:10px;right:10px;
  z-index:1;
  border-radius:3px;
  width:120px;
  border:1px solid rgba(0,0,0,0.4);
  }
  .menu-ui a {
    font-size:13px;
    color:#404040;
    display:block;
    margin:0;padding:0;
    padding:10px;
    text-decoration:none;
    border-bottom:1px solid rgba(0,0,0,0.25);
    text-align:center;
    }
    .menu-ui a:first-child {
      border-radius:3px 3px 0 0;
      }
    .menu-ui a:last-child {
      border:none;
      border-radius:0 0 3px 3px;
      }
    .menu-ui a:hover {
      background:#f8f8f8;
      color:#404040;
      }
</style>

<div id='map'></div>
<div id='navigation' class='menu-ui'>
  <a href='#' data-position='42.36,-71'>Boston</a>
  <a href='#' data-position='40.4,-3.7'>Madrid</a>
  <a href='#' data-position='31.76,35.2'>Jerusalem</a>
</div>

<script>
var map = L.mapbox.map('map')
    .setView([0, 0], 2)
    .addLayer(L.mapbox.styleLayer('mapbox://styles/mapbox/streets-v11'));

document.getElementById('navigation').onclick = function(e) {
    e.preventDefault();
    var pos = e.target.getAttribute('data-position');
    if (pos) {
        var loc = pos.split(',');
        map.setView(loc, 11);
    }
}
</script>
